<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #daojishi {
            display: flex;
            width: 400px;
            height: 300px;
            background-color: #765ffb;
            justify-content: space-between;
        }
        
        #shi,
        #fen,
        #miao {
            width: 100px;
            height: 100px;
            background-color: #b733c3;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="daojishi">
        <div id="shi">
            <span id="shi1">
					
				</span> 小时
        </div>
        <div id="fen">
            <span id="fen1">
					
				</span>分钟
        </div>
        <div id="miao">
            <span id="miao1">
					
				</span>秒
        </div>

    </div>
</body>

</html>
<script type="text/javascript">
    var shi = document.getElementById('shi1');
    var fen = document.getElementById('fen1');
    var miao = document.getElementById('miao1');
    var x = 0;
    var f = 1;
    var m = 1;
    //秒减少
    function a(m, f, x) {
        var t = setInterval(function() {
            miao.innerHTML = m;
            fen.innerHTML = f;
            shi.innerHTML = x;
            m--;
            if (m < 0) {
                m = 60;
                f--;
                if (f < 0) {
                    f = 59;
                    x--;
                    if (x < 0) {
                        clearInterval(t);
                    }
                }
            }
        }, 1000);

    }
    // 分钟减
    function b(f) {

        setInterval(function() {

            if (m == 0) {
                f--
            }
            fen.innerHTML = f;
        }, 1000)

    }
    // 小时减
    function c(x) {
        setInterval(function() {
            if (f == 0) {
                x--
            }
            shi.innerHTML = x;
        }, 1000)
    }


    a(20, 0, 0);
    // a(m);
    // b(f);
    // c(x);
</script>